<template>
    <div class="customer-file">
        <c-title text="顾客档案"></c-title>
        <div class="search">
            <!-- <div style="display: flex;align-items: center;margin-right: .625rem;" @click='show_tips = !show_tips'>
                <div class="current-text">{{ value_category == 2 ? '手机号' : value_category == 1 ? '客户名称' : value_category
                    == 3 ? '项目' : '老师名称' }}
                </div><van-icon name="arrow-down" />
            </div>
            <div class="search-options" v-if="show_tips">
                <div @click="choose(2)">手机号</div>
                <div @click="choose(1)">客户名称</div>
                <div @click="choose(3)">项目</div>
                <div @click="choose(4)">老师名称</div>
            </div> -->
            <div class="search-input">
                <i class="iconfont icon-sousuo1"></i>
                <input v-model="keyword" type="text" placeholder="请输入客户名称/项目名称/老师名称/客户手机号" />
            </div>
            <button class="search-button" @click="search">搜索</button>
        </div>
        <template v-if="list && list.length !== 0">
            <div class="list" v-for="item in list" :key="item.id" @click="goto(item.id)">
                <div class="flex-a-c">
                    <div class="error flex-a-c flex-j-c ">
                        <i class="iconfont icon-fontclass-rengezhongxin"></i>
                    </div>
                    <div class="list-left">
                        <div class="nick-name">{{ item.name }}</div>
                        <div class="tel">{{ item.mobile }}</div>
                    </div>
                </div>
                <div>
                    <button @click.stop="handle_del(item)" style="margin-right: .75rem;">删除</button>
                    <button @click.stop="handle(item)">发送</button>
                </div>
            </div>
        </template>
        <div v-else class="empty flex-a-c flex-j-c">
            <img :src="img_url" alt="">
            <div class="tips">暂无客户档案</div>
        </div>


        <div class="button" @click="fill_in">
            <div class="button-text">新建客户</div>
        </div>
        <van-dialog v-model="show" title="发送" :showConfirmButton="false">
            <input class="dialog-input" type="text" placeholder="请输入手机号" v-model="mobile" />
            <div class="btn-wrapper">
                <span class="btn false" @click="cancel">取消</span>
                <span class="btn true" @click="handle_submit">发送</span>
            </div>
        </van-dialog>
    </div>
</template>

<script>
import { Dialog } from 'vant';
import { scrollMixin } from '../../../utils/mixin';

export default {
    mixins: [scrollMixin],
    data() {
        return {
            img_url:window.location.origin+'/static/local/customer-archive/empty.png',
            list: [],
            mobile: "",
            show: false,
            keyword: "",
            value_category: 2,
            show_tips: false,
            isLoadMore: true,
            page: 1,
            total_page: 0,
            customer_archive_id: "",
        };
    },
    activated() {
        this.initData();
        this.getData()
    },
    methods: {
        handle_del(data){
            Dialog.confirm({
                title: '确定删除该客户档案？',
                })
                .then(() => {
                    $http.post('plugin.customer-archive.frontend.customer-archive.del-customer',{customer_archive_id:data.id},'.').then(res=>{
                        this.$toast(res.msg);
                        if(res.result){
                            let index = this.list.findIndex(item=>item.id == data.id);
                            this.list.splice(index,1);
                        }
                    })
                })
                .catch(() => {
                    // on cancel
                });
        },
        search(){
            this.show_tips = false;
            this.getData()
        },
        cancel() {
            this.show = false;
            this.mobile = '';
        },
        initData() {
            this.show_tips = false;
            this.isLoadMore = true;;
            this.customer_archive_id = '';
            this.mobile = '';
        },
        async handle_submit() {
            let json = { customer_archive_id: this.customer_archive_id, mobile: this.mobile };
            let { result, msg } = await $http.post('plugin.customer-archive.frontend.customer-archive.transfer-customer', json, '.')
            this.$toast(msg);
            if (result) {
                this.customer_archive_id = '';
                this.mobile = '';
                this.show = false;
                this.getData();
            }
        },
        goto(id) {
            this.$router.push(this.fun.getUrl('customer_life_info', { id }))
        },
        fill_in() {
            this.$router.push(this.fun.getUrl('customer_life_fill_in'))
        },
        choose(data) {
            this.value_category = data;
            this.show_tips = false;
        },
        handle(data) {
            this.customer_archive_id = data.id;
            this.show = true;
        },
        async getData(page = 1) {
            let json = { page, keyword: this.keyword, search_type: this.value_category };
            let { result, msg, data } = await $http.post("plugin.customer-archive.frontend.customer-archive.get-list", json, '.');
            if (result) {
                this.list = page == 1 ? data.list.data : this.list.concat(data.list.data);
                this.page = data.list.current_page;
                this.total_page = data.list.last_page;
            } else {
                this.$toast(msg);
            }
        },
        getMoreData() {
            this.isLoadMore = false;
            if (this.page >= this.last_page) return;
            let page = this.page + 1;
            this.getData(page);
        }
    }
};
</script>

<style scoped lang='scss'>
::v-deep .van-dialog__header {
    font-weight: bold;
    font-size: 1rem;
    color: #00001C;
}

.customer-file {
    padding-bottom: 6.25rem;
    position: relative;

    min-height: 100vh;
    .tips {
        font-weight: 400;
        font-size: .8125rem;
        color: #6E6E79;
    }

    .empty {
        position: absolute;
        top:5.625rem;
        left: 0;
        right: 0;
        bottom: .3125rem;
        display: flex;
        flex-direction: column;
        margin: .625rem .75rem;
        background: #FFFFFF;
        border-radius: .5rem .5rem .5rem .5rem;
        img{
            width: 7.1875rem;
            margin: 0;
        }
    }

    .error {
        width: 2.75rem;
        height: 2.75rem;
        background: #D4DEEC;
        border-radius: 50%;
        margin-right: .4063rem;

        .iconfont {
            font-size: 1.5rem;
            color: #fff;
        }

    }

    .false {
        color: #00001C;
        border: 1px solid #D6D6DC;
    }

    .btn-wrapper {
        width: 14.125rem;
        margin: 1.5rem auto 1.375rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .true {
        background-color: var(--themeBaseColor);
        border: 1px solid var(--themeBaseColor);
        color: #fff;
    }

    .btn {
        font-weight: 500;
        font-size: .8125rem;
        width: 6.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 2rem;
        border-radius: 1.3438rem 1.3438rem 1.3438rem 1.3438rem;
        border: .0313rem solid #D6D6DC;
    }

    .dialog-input {
        margin-top: 1.1563rem;
        background: #F5F5F5;
        border-radius: .5rem;
        border: none;
        width: 14.125rem;
        height: 2.25rem;
        text-align: left;
        padding: .625rem;
    }

    .button::after {
        content: "";
        position: absolute;
        width: .1875rem;
        height: 1.0625rem;
        background: #FFFFFF;
        top: 1.0625rem;
        border-radius: .1875rem .1875rem .1875rem .1875rem;
        left: 50%;
        transform: translateX(-50%);
    }

    .button::before {
        content: "";
        position: absolute;
        width: 1.0625rem;
        height: .1875rem;
        background: #FFFFFF;
        top: 1.5rem;
        border-radius: .1875rem .1875rem .1875rem .1875rem;
        left: 50%;
        transform: translateX(-50%);
    }

    .button {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: 1.5rem;
        width: 4.625rem;
        height: 4.625rem;
        background-color: var(--themeBaseColor);
        border-radius: 100%;
        color: #fff;
        padding-top: 2.5rem;
        font-weight: 400;
        box-sizing: border-box;
        font-size: .8125rem;
        color: #FFFFFF;
        box-shadow: 0rem .625rem 1.25rem .0313rem var(--themeBaseColor);
    }

    .tel {
        font-weight: 400;
        font-size: .8125rem;
        color: #6E6E79;
        line-height: 1;
    }

    .nick-name {
        line-height: 1;
        font-weight: bold;
        text-align: left;
        font-size: .8125rem;
        color: #00001C;
        margin-bottom: .5313rem;
    }


    .list-left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: .2813rem 0 .3125rem;
        box-sizing: border-box;
    }

    .list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
        border-radius: .5rem;
        margin: .625rem;
        padding: .6875rem .625rem .6875rem .6875rem;
        box-sizing: border-box;

        button {
            background-color: #fff;
            border: 1px solid var(--themeBaseColor);
            width: 3.75rem;
            height: 1.75rem;
            line-height: 1.75rem;
            color: var(--themeBaseColor);
            text-align: center;
            border-radius: 1.0938rem
        }

    }

    .current-text {
        margin-right: 1.1563rem;
        margin-left: .125rem;
    }

    .search-button {
        padding: 0.375rem .75rem;
        background-color: var(--themeBaseColor);
        font-size:.75rem;
        border-radius: 1.25rem;
        border: none;
        flex-shrink: 0;
        color: #fff;
        margin-left:.375rem;
    }

    .search-input {
        flex: 1;
        display: flex;
        align-items: center;
        height: 2rem;
        background: #F6F6F6;
        border-radius: 1.0938rem;
        padding: 0 .375rem;

        .icon-sousuo1 {
            font-size: 0.875rem;
            margin-right: 0.2188rem;
            color: #999999;
        }
        input::placeholder{
            font-size: .75rem !important;
        }
        input {
            flex: 1;
            border: none;
            border-radius: 100px;
            padding-left: 0.1563rem;
        }
    }

    .search-options {
        position: absolute;
        left: .75rem;
        bottom: -0.3125rem;
        background-color: #fff;
        border-radius: .5rem;
        transform: translateY(100%);
        z-index: 100;
        width: 6.25rem;

        &::after {
            content: "";
            display: block;
            position: absolute;
            top: -1.125rem;
            left: .625rem;
            border: .625rem solid #fff;
            border-color: transparent transparent #fff transparent;
            z-index: 2;
        }

        div {
            line-height: 1.875rem;
            // border-bottom: 1px solid #ccc;
            margin: 0 .75rem;
        }

        div:last-child {
            border-bottom: unset;
        }

    }

    .search {
        position: relative;
        display: flex;
        align-items: center;
        padding: .5rem .625rem;
        background-color: #FFFFFF;
    }
}
</style>